<template>
	<div class="auditer">
		<div class="checkList" v-for="(item, index) in checkList" :key="index">
			<div class="avatar">
				{{ username(item) }}
			</div>
			{{ item.name }}
		</div>
		<image src="../../static/process-flow/addmeeting_18.png" mode="widthFix" class="addbtn" @click="onClickHandle"></image>
		<uni-popup ref="UniPopupRef">
			<div class="main">
				<div class="title">选择人员</div>
				<div class="auditer-breadcrumb">
					<div class="breadcrumb-item" v-for="(item, index) in breadcrumb" :key="index" @click="onChangeBreadcrumb(item, index)">
						{{ item.name }}
					</div>
				</div>
				<div class="list">
					<template v-for="(item, index) in list">
						<div class="item" :key="index + '00'" v-if="item.type === '00'">
							<div class="el-checkbox disabled">
								<img class="avatar" :src="logo" alt="" />
								<div class="name">
									{{ item.name }}
									<div class="dept-path" v-if="item.parents">
										{{ item.parents }}
									</div>
								</div>
							</div>
							<div v-if="item.childFlag == '01'" class="el-button" @click="toNext(item)">下级</div>
						</div>
						<div class="item" :key="index + '01'" v-else>
							<div :class="['el-checkbox', { active: isChecked(item) }]" @click="onCheck(item)">
								<div class="avatar">{{ username(item) }}</div>
								<div class="name">
									{{ item.name }}
									<div class="dept-path" v-if="item.parents">
										{{ item.parents }}
									</div>
								</div>
							</div>
						</div>
					</template>
				</div>
				<div class="footer" @click="onSubmit">确定</div>
			</div>
		</uni-popup>
	</div>
</template>

<script>
import { getComponentList, nameForCom } from "@/uni/uni.js"
import logo from "@/static/process-flow/dept-logo.svg"

let list = {}
export default {
	name: "auditer",
	model: {
		prop: "value",
		event: "update:value",
	},
	props: {
		multiple: {
			type: [Boolean],
			default: false,
		},
		value: {},
		disDept: {
			type: [Boolean],
			default: false,
		},
		disUser: {
			type: [Boolean],
			default: false,
		},
		authFlag: {
			type: String,
			default: "01",
		},
	},
	data() {
		return {
			logo,
			visible: false,
			checkList: [],
			list: [],
			breadcrumb: [
				{
					name: "全部",
					id: "",
				},
			],
			formatValue: {
				dept: [],
				user: [],
			},
		}
	},
	computed: {
		isCheckAll() {
			if (this.list.length === 0) return false
			if (this.checkList.length === 0) {
				return false
			}
			return this.list.every(item => {
				if (this.disDept && item.type === "00") return true
				if (this.disUser && item.type === "01") return true
				return this.isChecked(item)
			})
		},
		checkListIds() {
			return this.checkList.map(item => item.id)
		},
		deptLength() {
			return this.checkList.filter(item => item.type === "00").length
		},
		userLength() {
			return this.checkList.filter(item => item.type === "01").length
		},
	},
	methods: {
		onClickHandle() {
			this.visible = true
			this.getDeptList()
			this.$refs.UniPopupRef.open("bottom")
		},
		getNameForCom() {
			nameForCom(this.formatValue).then(res => {
				this.checkList = [].concat(res)
			})
		},
		async getDeptList(id = "") {
			if (list[id]) {
				this.list = [].concat(list[id])
			} else {
				getComponentList({ id, authFlag: this.authFlag }).then(data => {
					list[id] = data
					this.list = [].concat(data)
				})
			}
		},

		onChangeBreadcrumb(breadcrumb, index) {
			this.breadcrumb = this.breadcrumb.slice(0, index + 1)
			this.getDeptList(breadcrumb.id)
		},
		toNext(item) {
			this.breadcrumb.push(item)
			this.getDeptList(item.id)
		},

		onCheck(item) {
			if (this.multiple) {
				if (this.isChecked(item)) {
					this.checkList = this.checkList.filter(list => list.id !== item.id)
				} else {
					this.checkList.push({
						...item,
						parents: this.breadcrumb
							.map((item, index) => (index ? item.name : false))
							.filter(item => item)
							.join("/"),
					})
				}
			} else {
				this.checkList = [
					{
						...item,
						parents: this.breadcrumb
							.map((item, index) => (index ? item.name : false))
							.filter(item => item)
							.join("/"),
					},
				]
			}
		},
		onDeleteCheck(item, index) {
			this.checkList.splice(index, 1)
		},
		clearAll() {
			this.checkList = []
		},
		onTotalChange(status) {
			const checkList = this.list
				.filter(item => {
					return !this.isChecked(item)
				})
				.filter(item => {
					if (this.disDept && this.disUser) return false
					if (this.disDept && item.type === "00") return false
					if (this.disUser && item.type === "01") return false
					return true
				})
			if (status) {
				this.checkList = this.checkList.concat(checkList)
			} else {
				this.checkList = this.checkList.filter(item => {
					return !this.list.some(check => check.id === item.id)
				})
			}
		},

		isChecked(item) {
			return this.checkListIds.includes(item.id)
		},
		username(item) {
			return item.name.slice(0, 2)
		},
		//
		formatReturnValue() {
			const dept = []
			const user = []
			this.checkList.forEach(item => {
				if (item.type === "00") {
					dept.push(item.id)
				} else {
					user.push(item.id)
				}
			})
			return {
				dept,
				user,
			}
		},

		onSubmit() {
			this.formatValue = this.formatReturnValue()
			this.$emit(
				"update:value",
				this.checkList.map(item => item.id),
			)
			this.$emit("on-confirm", this.returnValue, this.checkList)
			this.$refs.UniPopupRef.close()
		},
	},
	watch: {
		formatValue: {
			handler() {
				this.getNameForCom()
			},
			immediate: true,
			deep: true,
		},
	},
}
</script>

<style lang="scss" scoped>
.auditer {
	margin-top: 15rpx;
	width: 100%;
}
.addbtn {
	width: 92rpx;
	height: 92rpx;
}
.main {
	background: #fff;
	border-radius: 15rpx 15rpx 0 0;
	padding-bottom: 20rpx;
}
.title {
	padding: 20rpx 30rpx 10rpx;
	font-size: 30rpx;
	font-weight: 700;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.auditer-breadcrumb {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	white-space: nowrap;
	overflow-x: auto;
	font-size: 24rpx;
	padding: 15rpx 30rpx;
	border-bottom: 1px solid #f5f5f5;
	.breadcrumb-item {
		cursor: pointer;
		user-select: none;
		display: inline-block;
		padding-right: 15px;
		position: relative;
		&::before {
			content: "/";
			position: absolute;
			top: 0;
			bottom: 0;
			right: 10rpx;
			opacity: 0;
			padding-right: 0;
		}
		&:not(:last-child) {
			&::before {
				opacity: 1;
			}
		}
		&:hover,
		&:last-child {
			color: #3390ff;
		}
		&:hover {
			text-decoration: underline;
		}
	}
}
.list {
	overflow-y: auto;
	max-height: 70vh;
	padding-bottom: 30rpx;
	margin-bottom: 30rpx;
	border-bottom: 1px solid #f5f5f5;
}
.checkList {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	margin-bottom: 10rpx;
}
.item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10rpx 30rpx;
	.el-checkbox {
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: relative;
		&.disabled {
			&::before {
				display: none;
			}
		}
		&.active {
			&::before {
				background: #4954e6;
				border: 1px solid #4954e6;
			}
		}
		&::before {
			content: "";
			display: block;
			border-radius: 50%;
			width: 30rpx;
			height: 30rpx;
			border: 1px solid #ccc;
			margin-right: 10rpx;
			transition: all 0.25s;
		}
		&::after {
			content: "";
			position: absolute;
			top: 0;
			bottom: 0;
			left: 10rpx;
			margin: auto;
			width: 13rpx;
			height: 8rpx;
			border-bottom: 1px solid #fff;
			border-left: 1px solid #fff;
			transform: rotate(-45deg);
		}
	}
	.el-button {
		color: #4954e6;
		font-size: 26rpx;
	}
}
.avatar {
	width: 80rpx;
	height: 80rpx;
	white-space: nowrap;
	background: #4954e6;
	border-radius: 25rpx;
	overflow: hidden;
	font-size: 22rpx;
	color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-right: 10rpx;
}
.footer {
	display: flex;
	justify-content: center;
	align-items: center;
	background: #4954e6;
	color: #fff;
	width: 650rpx;
	height: 60rpx;
	border-radius: 10rpx;
	margin: auto;
}
</style>
